<template>
    <div class="hsa-title-pane" :class="HsaClass">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
    import { provide, computed, type PropType } from 'vue'

    // 组件配置
    defineOptions({
        name: 'HsaTitlePane'
    })

    // 组件属性
    const props = defineProps({
        // 控制操作
        steerable: {
            type: Array as PropType<string[]>,
            default: () => []
        },
        // 填满
        fill: {
            type: Boolean,
            default: false
        }
    })

    // 计算属性：根据 autoHeight 动态设置类名
    const HsaClass = computed(() => ({
        'hsa-title-pane__fill': props.fill
    }))

    // 使用computed创建响应式值
    const activeNames = computed(() => props.steerable)

    // 提供给子组件的属性
    provide('hsa-title-pane-steerable', activeNames)
</script>

<style lang="scss" scoped>
    .hsa-title-pane {
        background-color: #fff;
        border-radius: 4px;
        padding-bottom: 10px;
        box-sizing: border-box;
        position: relative;

        // 内容填充
        &__fill {
            height: 100%;
            overflow-y: auto;

            // 优化滚动条样式
            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #dcdfe6;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-track {
                background-color: #f5f7fa;
            }
        }
    }
</style>